<template>
  <div class="my-pipeline-index">
    <myTabs
      :tabsList="tabsList"
      :tabsValue="activeKey"
      @handle-change="handleChange"
      @refresh-select-list="refreshSelectList"
      :tagListData="tagList"
      :groupListData="groupList"
    />
  </div>
  <div class="my-pipeline-content">
    <myContent
      :activeKey="activeKey"
      ref="myContentRef"
      :tagListData="tagList"
      :groupListData="groupList"
      @refresh-select-list="refreshSelectList"
    />
  </div>
</template>
<script setup lang="ts">
import myTabs from './myTabs.vue';
import myContent from './myContent.vue';
import { cloneDeep } from 'lodash';
import { getTagList, getGroupList } from '@/api/pipeline';
const tabsList = ref<CommonTypes.TabItem[]>([{ name: '我参与的', key: 'myPart' }]);
const cloneTabList = cloneDeep(tabsList.value);
const myContentRef = ref<any>(null);
const activeKey = ref<string>('myPart');
const handleChange = (key: string) => {
  activeKey.value = key;
  // 筛选出cloneTabList中对应key的tab
  if (cloneTabList.some((item) => item.key === key)) {
    myContentRef.value.refreshTable();
    return false;
  }
  myContentRef.value.refreshTable(key);
};

const handleTabsLengthChange = (list: any, active: boolean) => {
  const newList: CommonTypes.TabItem[] = list.map((item: any) => {
    return { name: item.name, key: item.uuid };
  });
  // 合并克隆的原始数据与接口数据
  tabsList.value = cloneTabList.concat(newList);
  if (!active) return;
  activeKey.value = tabsList.value[0].key;
  myContentRef.value.refreshTable();
};

const refreshSelectList = (active = true) => {
  getTagListFn();
  getGroupListFn(active);
};

//查询标签列表
const tagList = ref<any[]>([]);
const groupList = ref<any[]>([]);
const getTagListFn = async () => {
  await getTagList({}).then((res) => {
    tagList.value = res;
  });
};
//查询流水线分组列表 active是否刷新列表
const getGroupListFn = async (active = true) => {
  await getGroupList({}).then((res) => {
    groupList.value = res.map((item: any) => {
      return { ...item, edit: false };
    });
  });
  handleTabsLengthChange(groupList.value, active);
};

onMounted(() => {
  getTagListFn();
  getGroupListFn(false);
});
</script>

<style lang="less" scoped>
.my-pipeline-index {
  width: 100%;
  margin-bottom: 16px;
  background-color: #fff;
  padding: 0 24px;
  border-radius: 8px;
}
.my-pipeline-content {
  width: 100%;
  background-color: #fff;
  padding: 0 24px 24px 24px;
  border-radius: 8px;
}
</style>
